<template>
  <el-drawer
    custom-class="custom-dialog"
    :title="title"
    :visible.sync="selfVisible"
    size="100%"
    direction="btt"
    @close="onDialogHide">
    <pdf-viewer :url="url"></pdf-viewer>
  </el-drawer>
</template>
<script>
import PdfViewer from './index.vue'
export default {
  name: 'PdfPopup',
  components: {
    PdfViewer,
  },
  props: {
    visible: {
      type: Boolean,
    },
    title: {
      type: String,
      default: '文档预览',
    },
    url: {
      type: String,
    },
  },
  data() {
    return {
      selfVisible: false,
    }
  },
  computed: {},
  watch: {
    visible(visible) {
      this.selfVisible = visible
    },
  },
  created() {},
  mounted() {},
  methods: {
    onDialogHide() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
    onSubmit() {
      this.selfVisible = false
    },
  },
}
</script>
<style lang="scss" scoped>
.custom-dialog {
  ::v-deep &.el-drawer {
    .el-drawer__header {
      margin-bottom: 0;
      padding: 10px 20px;
      box-shadow: 0px 2px 14px 1px rgba(67, 71, 74, 0.15);
      z-index: 1;
    }
  }
}
</style>
